<template>
  <!-- 物料检验标准 -->
  <div class="page-container">
    <div class="handoff">
      <div
        :class="{ selected: item.value == tagVal }"
        :key="item.value"
        v-for="item in tagList"
        @click="tagHandle(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="common-content-wrap" v-show="tagVal == 'container'">
      <TrTable
        ref="trTable"
        isNeedSelection
        isNeedIndex
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="containerTableColumn"
        requestName="searchHandle"
        :tableData="containerTableData"
        @add="isShowEdit = true"
        @remove="containerTypeDelete(ids)"
        @enable="containerTypeEnable()"
        @disabled="containerTypeDisable()"
        @export="exportHandle"
        @rowRemove="containerTypeDelete([$event.id])"
      />
      <TrEditPopup
        v-model="isShowEdit"
        :width="480"
        :title="checkTitle"
        :labelWidth="112"
        :valueObj.sync="formObj"
        :formData="formData"
        :list="popupList"
        @close="isShowEdit = false"
        @confrim="confrimHandle"
      />
    </div>
    <div class="common-content-wrap" v-show="tagVal == 'material'">
      <TrTable
        ref="trMaterialTable"
        isNeedSelection
        isNeedIndex
        :btnList="materialBtnList"
        :total="materialTotal"
        v-model="materialSearchParams"
        :searchShowList="materialSearchShowList"
        :searchHideList="materialSearchHideList"
        :tableColumn="materialTableColumn"
        requestName="materialSearchHandle"
        :tableData="materialTableData"
        @add="editHandle($event, 'add')"
        @remove="materialDelete(materialIds)"
        @enable="materialEnable()"
        @disabled="materialDisable()"
        @export="materialExportHandle"
        @rowRemove="materialDelete([$event.id])"
        @rowEdit="editHandle($event, 'edit')"
      />
      <TrEditPopup
        ref="materialRef"
        v-model="materialIsShowEdit"
        :width="480"
        :title="checkMaterialTitle"
        :valueObj.sync="materialFormObj"
        :relationList="relationList"
        :formData="materialFormData"
        :list="materialPopupList"
        @close="materialIsShowEdit = false"
        @confrim="materialConfrimHandle"
      />
    </div>
  </div>
</template>

<script>
import {
  getList,
  containerTypeSave,
  containerTypeEnable,
  containerTypeDisable,
  containerTypeDelete,
  getMaterialList,
  materialSave,
  materialUpdate,
  materialDelete,
  materialEnable,
  materialDisable,
} from "@/api/baseCode/containerType.js";
import { getColor } from "@/utils/billColor";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";

export default {
  components: {
    TrTable,
    TrEditPopup,
  },
  name: "MaterialInspectionStandard",
  data: () => ({
    tagVal: "container",
    tagList: [
      { label: "容器类型", value: "container" },
      { label: "容器类型与物料", value: "material" },
    ],
    // 嵌套弹框 - end
    // 物料检验标准-start
    checkTitle: "新增",
    currentHandle: "add", // add edit copy
    dialogId: "",
    totalNum: "",
    searchParams: {
      updateStartTime: "",
      updateEndTime: "",
      standardCode: "",
      standardName: "",
      standardVersion: "",
      standardStatusList: [],
      createStartTime: "",
      createEndTime: "",
      current: 1,
      size: 10,
    },
    containerTableColumn: [
      {
        type: "text",
        label: "容器类型编码",
        value: "containerTypeCode",
      },
      {
        type: "text",
        label: "容器类型",
        value: "containerType",
      },
      {
        type: "text",
        label: "容器类型描述",
        value: "remark",
      },
      {
        type: "text",
        label: "状态",
        value: "stateLabel",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "删除",
            option: "rowRemove",
          },
        ],
      },
    ],
    containerTableData: [],
    searchHideList: [
      {
        id: "containerTypeCode",
        label: "容器类型编码",
        type: "input",
        isNeed: false,
        width: 33.33,
        value: "",
      },
      {
        id: "containerType",
        label: "容器类型",
        type: "input",
        isNeed: false,
        width: 33.33,
        value: "",
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "删除",
        option: "remove",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "启用",
        option: "enable",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "停用",
        option: "disabled",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "导出",
        option: "export",
        color: "white",
      },
    ],
    materialAddbtnList: [
      {
        label: "新增",
        option: "materialTreeAdd",
        color: "blue",
      },
    ],
    tableAddColumn: [
      {
        type: "text",
        label: "容器类型",
        value: "projectName",
      },
      {
        type: "text",
        label: "物料类别",
        value: "unitCode",
      },
      {
        type: "text",
        label: "物料",
        value: "standardValue",
      },
      {
        type: "text",
        label: "承装数量",
        value: "lowerUpper",
      },
      {
        type: "text",
        label: "计量单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "物料",
        value: "standardValue",
      },
      {
        type: "text",
        label: "承装数量",
        value: "lowerUpper",
      },
      {
        type: "text",
        label: "状态",
        value: "standardStatusName",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "删除",
            option: "rowRemove",
          },
        ],
      },
    ],
    tableAddData: [],
    tableAddDataCopy: [],
    isShowEdit: false,
    footerAddList: [
      {
        label: "新增",
        option: "close",
        color: "white",
      },
      {
        label: "启用",
        option: "temporary",
        color: "white",
      },
      {
        label: "停用",
        option: "save",
        color: "blue",
      },
    ],
    formObj: {},
    formData: {},
    popupList: [
      {
        label: "容器类型",
        type: "input",
        width: 100,
        value: "",
        id: "containerType",
      },
      {
        label: "容器类型描述",
        type: "input",
        width: 100,
        value: "",
        id: "remark",
        isNeed: false,
      },
    ],

    // 物流检验-end

    // 检验标准与物料-start
    checkMaterialTitle: "新增",
    materialIsShowEdit: false,
    materialBtnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "删除",
        option: "remove",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "启用",
        option: "enable",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "停用",
        option: "disabled",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "导出",
        option: "export",
        color: "white",
      },
    ],
    materialTotal: 0,
    materialSearchParams: {
      createStartTime: "",
      createEndTime: "",
      categoryCode: "",
      categoryName: "",
      materialCode: "",
      materialName: "",
      current: 1,
      size: 10,
    },
    materialSearchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    materialSearchHideList: [
      {
        id: "containerTypeId",
        label: "容器类型",
        type: "loadselect",
        value: "",
        width: 33.33,
        requestObj: {
          url: "/api/mes-production-service/container-type/page",
          method: "post",
          searchKey: "containerType",
          rlLabel: "containerType",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "materialCategoryId",
        type: "loadselect",
        width: 33.33,
        label: "物料类别",
        value: "",
        requestObj: {
          url: "/api/mes-production-service/material-category/rpc-page",
          method: "post",
          searchKey: "categoryName",
          rlLabel: "categoryName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
    ],
    materialTableColumn: [
      {
        type: "text",
        label: "容器类型",
        value: "containerType",
      },
      {
        type: "text",
        label: "物料类别",
        value: "materialCategory",
      },
      {
        type: "text",
        label: "物料",
        value: "material",
      },
      {
        type: "text",
        label: "承装数量",
        value: "capacityNum",
      },
      {
        type: "text",
        label: "计量单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "状态",
        value: "stateLabel",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 100,
        showBtnList: [
          {
            label: "删除",
            option: "rowRemove",
          },
          {
            label: "编辑",
            option: "rowEdit",
          },
        ],
      },
    ],
    materialTableData: [],
    materialFormObj: {},
    materialFormData: {},
    materialPopupList: [
      {
        id: "containerTypeId",
        label: "容器类型",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 100,
        currentErrorLabel: "请选择单位",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "containerType",
        requestObj: {
          url: "/api/mes-production-service/container-type/page",
          method: "post",
          searchKey: "containerType",
          rlLabel: "containerType",
          rlValue: "id",
          resultKey: "data,data,records",
        },
        defaultParams: {
          stateList: [1],
        },
      },
      {
        id: "materialCategoryId",
        label: "物料类别",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 100,
        currentErrorLabel: "请选择单位",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "materialCategory",
        requestObj: {
          url: "/api/mes-production-service/material-category/rpc-page",
          method: "post",
          searchKey: "categoryName",
          rlLabel: "categoryName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "materialId",
        label: "物料",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 100,
        currentErrorLabel: "请选择物料",
        errorStatus: false,
        isNeed: false,
        disabled: true,
        selectedLabel: "",
        reviewLabel: "material",
        requestObj: {
          url: "/api/mes-production-service/material/page",
          method: "post",
          searchKey: "materialName",
          rlLabel: "materialName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
        defaultParams: {},
      },
      {
        label: "承装数量",
        type: "input",
        width: 100,
        value: "",
        inputType: "number",
        id: "capacityNum",
      },
      {
        label: "计量单位",
        type: "loadselect",
        width: 100,
        value: "",
        selectedLabel: "",
        reviewLabel: "newNumUnit",
        requestObj: {
          url: "/api/trio-system/unit/page",
          method: "post",
          searchKey: "unitName",
          rlLabel: "unitCode(unitName)",
          rlValue: "u9Code",
          resultKey: "data,data,records",
        },
        defaultParams: {
          isEnabledList: [1],
        },
        id: "numUnitCode",
      },
    ],
    relationList: [],
    // 检验标准与物料-end
  }),
  watch: {},
  computed: {
    ids() {
      return this.$refs.trTable.selectionList.map((item) => item.id);
    },
    materialIds() {
      return this.$refs.trMaterialTable.selectionList.map((item) => item.id);
    },
    isAdd() {
      return this.currentHandle == "add" ? true : false;
    },
    tableAddDataList() {
      return this.isAdd ? this.tableAddDataCopy : this.tableAddData;
    },
  },
  methods: {
    exportHandle() {
      this.$exportHandle({
        vm: this,
        params: this.searchParams,
        code: "container",
      });
    },
    materialExportHandle() {
      this.$exportHandle({
        vm: this,
        params: this.materialSearchParams,
        code: "material",
      });
    },
    searchHandle() {
      this.getContainerList();
    },
    materialSearchHandle() {
      this.getMaterialList();
    },
    confrimHandle() {
      this.containerTypeSave();
    },
    materialConfrimHandle() {
      if (this.checkMaterialTitle == "新增") {
        this.saveMaterial();
      } else if (this.checkMaterialTitle == "编辑") {
        this.updateMaterial();
      }
    },
    tagHandle(tagObj) {
      if (!tagObj) return;
      this.tagVal = tagObj.value;
      this.$nextTick(() => {
        if (tagObj.value == "container") {
          this.$refs.trTable.doLayout();
        } else {
          this.$refs.trMaterialTable.doLayout();
        }
      });
    },
    async getContainerList() {
      let { data } = await getList(this.searchParams);
      this.$validateData(data.data);
      this.containerTableData = data.data.records;
      this.containerTableData.forEach((item) => {
        item["stateLabelColor"] = getColor("QT", item.state);
      });
      this.totalNum = data.data.total;
      this.$refs.trTable.clearSelect();
    },
    async containerTypeSave() {
      let { data } = await containerTypeSave(this.formObj);
      if (data.code !== 200) return;
      this.isShowEdit = false;
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getContainerList();
    },
    async containerTypeEnable() {
      await this.$textShow({
        title: "启用",
        content: [this.$t("tip.enableTip")],
      });
      const { data } = await containerTypeEnable({ idList: this.ids });
      if (data.code !== 200) return;
      this.$refs.trTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getContainerList();
    },
    async containerTypeDisable() {
      await this.$textShow({
        title: "停用",
        content: [this.$t("tip.unenableTip")],
      });
      const { data } = await containerTypeDisable({ idList: this.ids });
      if (data.code !== 200) return;
      this.$refs.trTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getContainerList();
    },
    async containerTypeDelete(ids) {
      await this.$textShow({
        title: "删除",
        content: [this.$t("tip.delete")],
      });
      const { data } = await containerTypeDelete({ idList: ids });
      if (data.code !== 200) return;
      this.$refs.trTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getContainerList();
    },
    editHandle(data, type) {
      this.$validateData(data, 3);
      this.materialFormData = {};
      const materialCategoryId = this.$findByProperty(
        this.materialPopupList,
        "id",
        "materialCategoryId"
      );

      const containerTypeId = this.$findByProperty(
        this.materialPopupList,
        "id",
        "containerTypeId"
      );

      if (type == "add") {
        this.checkMaterialTitle = "新增";
        this.$set(materialCategoryId, "disabled", false);
        this.$set(containerTypeId, "disabled", false);
        this.relationList = [
          {
            id: "materialCategoryId",
            relaList: [
              {
                relaId: "materialId",
                params: [
                  {
                    labelWord: "materialCategoryId",
                    realWord: "rlValue",
                  },
                ],
              },
            ],
          },
        ];
        this.materialIsShowEdit = true;
      }
      if (type == "edit") {
        this.$set(materialCategoryId, "disabled", true);
        this.$set(containerTypeId, "disabled", true);
        this.relationList = [];
        this.materialFormData = {
          ...data,
          numUnitCode: data.numUnitU9Code,
        };
        this.materialFormObj = {
          ...this.materialFormObj,
          id: data.id,
        };
        this.checkMaterialTitle = "编辑";
        this.materialIsShowEdit = true;
      }
    },
    async getMaterialList() {
      let { data } = await getMaterialList(this.materialSearchParams);
      this.$validateData(data.data);
      this.materialTableData = data.data.records;
      this.materialTableData.forEach((item) => {
        item["stateLabelColor"] = getColor("QT", item.state);
        item.newNumUnit = `${item.numUnitCode}(${item.numUnitName})`;
      });
      this.materialTotal = data.data.total;
      this.$refs.trMaterialTable.clearSelect();
    },
    async saveMaterial() {
      let { data } = await materialSave(this.materialFormObj);
      if (data.code !== 200) return;
      this.materialIsShowEdit = false;
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getMaterialList();
    },
    async updateMaterial() {
      let { data } = await materialUpdate(this.materialFormObj);
      if (data.code !== 200) return;
      this.materialIsShowEdit = false;
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getMaterialList();
    },
    async materialEnable() {
      await this.$textShow({
        title: "启用",
        content: [this.$t("tip.enable")],
      });
      const { data } = await materialEnable({ idList: this.materialIds });
      if (data.code !== 200) return;
      this.$refs.trMaterialTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getMaterialList();
    },
    async materialDisable() {
      await this.$textShow({
        title: "停用",
        content: [this.$t("tip.unEnable")],
      });
      const { data } = await materialDisable({ idList: this.materialIds });
      if (data.code !== 200) return;
      this.$refs.trMaterialTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getMaterialList();
    },
    async materialDelete(ids) {
      await this.$textShow({
        title: "删除",
        content: [this.$t("tip.delete")],
      });
      const { data } = await materialDelete({ idList: ids });
      if (data.code !== 200) return;
      this.$refs.trMaterialTable.clearSelect();
      this.$message.success(this.$t("msg.success"));
      this.searchParams.current = 1;
      this.getMaterialList();
    },
  },
  mounted() {
    // this.getContainerList();
    // this.getMaterialList();
  },
};
</script>

<style lang="scss" scoped>
.handoff {
  display: flex;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
  & > div {
    background-color: #ffffff;
    padding: 4px 16px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
  }
  & > div:nth-child(1) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  & > div:nth-child(2) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .selected {
    color: #0087d6;
    border: 1px solid #0087d6;
    border-radius: 4px;
  }
}

.el-date-editor--datetimerange {
  width: auto;
}
.edit-list-wrap {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -12px;
  padding-right: 12px;
  .edit-list-left {
    position: relative;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    margin-right: -24px;
  }
  .edit-list-right {
    height: 8px;
  }
  .edit-item-wrap {
    display: flex;
    align-items: center;
    padding-right: 24px;
    margin-bottom: 24px;
    .edit-label {
      flex-shrink: 0;
      padding-left: 8px;
      .edit-text {
        position: relative;
        width: 100%;
        color: rgba(#000, 0.9);
        font-weight: 400;
        font-size: 14px;
        padding-right: 16px;
        text-align: right;
        &::before {
          position: absolute;
          content: "*";
          color: #e34d59;
          top: 3px;
          left: -8px;
        }
      }
    }
    .edit-item-right {
      position: relative;
      flex: 1;
      .check-box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: -16px;
        .check-item {
          display: flex;
          align-items: center;
          margin-right: 16px;
          margin-bottom: 16px;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
        }

        .check-icon {
          height: 16px;
          width: 16px;
          margin-right: 8px;
          border-radius: 3px;
          border: 1px solid #dcdcdc;
        }

        .check-icon.active {
          border: 1px solid $main-color;
          background-color: $main-color;
          background-image: url("~@/assets/icons/check_active_icon.png");
          background-size: contain;
        }
        .check-label {
          color: rgba(#000, 0.9);
          font-weight: 400;
          font-size: 14px;
          white-space: nowrap;
        }
      }
      .edit-error-label {
        opacity: 0;
        transition: opacity 0.3s;
        position: absolute;
        font-size: 12px;
        top: 110%;
        font-weight: 400;
        color: #e34d59;
        left: 8px;
      }
      &.errorStatus {
        .edit-error-label {
          opacity: 1;
        }
      }
    }
    &.flexStart {
      align-items: flex-start;
      .edit-label {
        padding-top: 6px;
      }
    }
    &.unNeed {
      .edit-text::before {
        display: none;
      }
    }
  }
}

.edit-interval {
  display: flex;
  align-items: center;
  .lever {
    color: #000000;
    font-weight: 400;
    font-size: 14px;
    width: 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.9);
    margin: 0 4px;
  }
}
</style>
